<!-- 消息记录 -->
<template>
  <div class='message_log'>
    <dt-search ref="search" :xlBtn='6'>
      <Button type="primary" @click="createOrEditMsg('add')">创建消息</Button>
    </dt-search>
    <dt-grid ref="table" :page="page" :onFetch='onFetch' />
    <!-- 阅读明细 -->
    <Modal v-model="readDetailModal" title="阅读明细" @on-cancel="AllModalCancel" width="800px"
      :footerHide="true">
      <read-detail v-if="readDetailModal" @onClose='AllModalCancel' :rowData='rowData' />
    </Modal>
  </div>
</template>

<script>
  import SearchOpt from '../opt/SearchOpt.js'
  import Column from '../columns/listColumns.js'
  import msgApi from '@/biz/message'
  import readDetail from './readDetail'


  export default {
    components: { readDetail },
    data() {
      return {
        page: {
          rows: 10,
        },
        filter: { sendCompany: [] },
        readDetailModal: false,
        rowData: null,

      };
    },
    methods: {
      onFetch(data) {
        data.sendCompany = this.filter.sendCompany.join(',')
        let params = data
        return msgApi.msgFindPages(params).then((res) => {
          return res
        })
      },
      handelReadDetail(row) {
        if (row.peopleAll == '0/0/0') return false
        this.readDetailModal = true
        this.rowData = row
      },
      AllModalCancel() {
        this.readDetailModal = false
      },
      onCheck(row) {
        this.handelBtn(row, 1)
      },
      onEdit(row) {
        this.handelBtn(row, 2)
      },
      onSend(row) {
        this.handelBtn(row, 3)
      },
      cancelSend(row) {
        this.handelBtn(row, 4)
      },
      againSend(row) {
        this.handelBtn(row, 5)
      },
      init() {
        this.$refs.table.fetch()
      },
      //表格操作项 type: 1:查看详情 2:编辑 3:发送 4:取消发送 5:重新发送
      handelBtn(row, type) {
        this.msgId = row.msgId
        if (type == 1) {
          // 查看详情
          this.createOrEditMsg('view', row)
        } else if (type == 2) {
          // 编辑
          this.createOrEditMsg('edit', row)
        } else if (type == 4) {
          //取消发送
          let params = {
            msgId: row.msgId,
            saveState: 5,
          }
          this.$Modal.confirm({
            title: '请确认',
            content: '确定取消发送该条消息吗？',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
              msgApi.updateMsg(params).then((res) => {
                this.$Message.success('取消发送成功')
                this.init()
              })
            },
          })
        } else if (type == 3 || type == 5) {
          //发送 or 重新发送
          let params = {
            msgId: row.msgId,
            saveState: 2,
            createId: row.createId,
          }
          msgApi.sendMsg(params).then((res) => {
            this.$Message.success('发送成功')
            this.init()
          })
        }
      },
      //创建消息
      createOrEditMsg(type, rows) {
        if (type == 'add') {
          this.$router.push({
            path: '/backStage/message/addEditmessage',
            query: {
              type: 'add'
            },
          })
        } else if (type == 'edit') {
          this.$router.push({
            path: 'addEditmessage',
            query: {
              type: 'edit',
              msgId: rows.msgId
            },
          })
        } else if (type == 'view') {
          this.$router.push({
            path: 'messageDetail',
            query: {
              type: 'view',
              msgId: rows.msgId
            },
          })
        }
      },
    },
    mounted() {
      this.$refs.search.init(this.$refs.table, new SearchOpt(), this.filter)
      this.$refs.table.init(this, new Column())
      this.$refs.table.fetch()
    }
  }
</script>
<style lang='scss' scoped>
  .message_log {
    padding: 20px;

    .create_msg {
      margin-bottom: 20px;
    }
  }
</style>